<template>
  <div class="customer-list-page">
    <h3>客户管理</h3>
    <AreaTitleWarp :title="'客户管理'"></AreaTitleWarp>
    <AreaWarp :padding="true">
      <SearchWarp :label="'账号'">
        <el-input v-model.trim="searchInfo.account" placeholder="请输入账号"></el-input>
      </SearchWarp>
      <SearchWarp :label="'余额'">
        <el-input class="inputWidth" v-model="searchInfo.startBalance" placeholder="最小数量"></el-input>-
        <el-input class="inputWidth" v-model="searchInfo.endBalance" placeholder="最大数量"></el-input>
      </SearchWarp>
      <BtnWarp>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button type="info" icon="el-icon-delete" @click="reset">重置</el-button>
      </BtnWarp>
    </AreaWarp>

    <BtnWarp>
      <el-button class="add" type="primary" icon="el-icon-plus" @click="edit(1)">新增客户</el-button>
    </BtnWarp>

    <!-- 搜索结果 -->
    <AreaWarp :padding="false" v-loading="loading">
      <el-table
        :data="tableInfo.list"
        style="width: 100%"
        class="pub-table"
        header-row-class-name="pub-table-header-row"
        header-cell-class-name="pub-table-header-cell"
        tooltip-effect="dark"
      >
        <el-table-column
          prop="addTime"
          label="创建日期"
          :formatter="formatter_timeYMDHMS"
          min-width="150"
        ></el-table-column>
        <el-table-column prop="account" label="账号"></el-table-column>
        <el-table-column prop="linkedMan" label="联系人"></el-table-column>
        <el-table-column prop="mobile" label="联系电话" min-width="100"></el-table-column>
        <el-table-column prop="position" label="职务"></el-table-column>
        <el-table-column prop="companyName" label="公司名称"></el-table-column>
        <el-table-column prop="companyAddress" label="公司地址"></el-table-column>
        <el-table-column prop="balance" label="余额(条)"></el-table-column>
        <el-table-column prop="address" label="操作" min-width="180">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="recharge(scope.row)">充值</el-button>
            <el-button type="text" size="small" @click="modifyPassword(scope.row)">重置密码</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pub-page"
        @size-change="handleSizeChange"
        @current-change="search"
        :current-page="searchInfo.page"
        :page-sizes="[20, 50, 100]"
        :page-size="searchInfo.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableInfo.total"
      ></el-pagination>
    </AreaWarp>

    <!-- 新增、编辑对话框 -->
    <customerEdit :message="message" :flag="flag" v-if="editVisible" @customerEdit="customerEdit"></customerEdit>

    <!-- 充值对话框 -->
    <el-dialog
      title="充值"
      :visible.sync="rechargeVisible"
      width="50%"
      @close="rechargeCancle"
      :close-on-click-modal="false"
      :close-press-escape="false"
      :modal-append-to-body="false"
    >
      <li>
        <span class="span1">账号:</span>
        <span class="span2">
          <el-input v-model="rechargeInfo.account" disabled></el-input>
        </span>
      </li>
      <li>
        <span class="span1">充值条数:</span>
        <span class="span2">
          <el-input v-model="rechargeInfo.rechargeNum" placeholder="请输入充值条数" maxlength="10"></el-input>
        </span>
      </li>
      <span slot="footer" class="dialog-footer">
        <el-button @click="rechargeCancle">取 消</el-button>
        <el-button type="primary" @click="rechargeSure">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 重置密码对话框 -->
    <el-dialog
      title="重置密码"
      :visible.sync="modifyVisible"
      width="50%"
      @close="modifyCancle"
      :close-on-click-modal="false"
      :close-press-escape="false"
      :modal-append-to-body="false"
    >
      <li>
        <span class="span1">账号:</span>
        <span class="span2">
          <el-input v-model="modifyInfo.account" disabled></el-input>
        </span>
      </li>
      <li>
        <span class="span1">新密码:</span>
        <span class="span2">
          <el-input
            v-model="modifyInfo.password"
            placeholder="请输入新密码"
            minlength="6"
            maxlength="20"
            type="password"
          ></el-input>
        </span>
      </li>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modifyCancle">取 消</el-button>
        <el-button type="primary" @click="modifySure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import customerEdit from "./customerEdit";
import Customer from "../../../assets/js/customer.js";
import md5 from "md5";
export default {
  components: {
    customerEdit
  },
  data() {
    return {
      searchInfo: {
        account: "",
        startBalance: "",
        endBalance: "",
        page: 1,
        size: 20
      },
      tableInfo: {
        list: [],
        total: 0
      },
      loading: false,
      message: null,
      editVisible: false,
      flag: 1,
      // 充值
      rechargeVisible: false,
      rechargeInfo: {
        id: "",
        rechargeNum: ""
      },
      //重置密码
      modifyVisible: false,
      modifyInfo: {
        id: "",
        password: ""
      }
    };
  },
  methods: {
    handleSizeChange(val) {
      let that = this;
      that.searchInfo.size = val;
      that.searchInfo.page = 1;
      that.search();
    },
    //搜索
    search(currentPage) {
      let that = this;
      that.searchInfo.page = typeof currentPage == "number" ? currentPage : 1;
      let x = {
        account: that.searchInfo.account,
        startBalance: that.searchInfo.startBalance,
        endBalance: that.searchInfo.endBalance,
        page: that.searchInfo.page,
        size: that.searchInfo.size
      };
      let customer = new Customer(x);
      let reqData = customer.getState();
      if (reqData.code) {
        that.showMsg(reqData.message, "error");
        return;
      }
      that.loading = true;
      that.ajaxJson({
        url: "/customerManage/listCustomer",
        data: reqData,
        success: function(res) {
          if (res.code == "0") {
            that.tableInfo = res.data;
          } else {
            that.showMsg(res.message, "error");
          }
          that.loading = false;
        }
      });
    },
    //重置
    reset() {
      let that = this;
      that.searchInfo = {
        account: "",
        startBalance: "",
        endBalance: "",
        page: 1,
        size: 20
      };
      that.search();
    },
    //新增、编辑
    edit(row) {
      let that = this;
      if (row == 1) {
        that.message = null;
        that.flag = 1;
      } else {
        that.flag = 2;
        that.message = {
          id: row.id,
          account: row.account,
          password: row.password,
          linkedMan: row.linkedMan,
          mobile: row.mobile,
          position: row.position,
          companyName: row.companyName,
          companyAddress: row.companyAddress
        };
      }
      that.editVisible = true;
    },
    customerEdit() {
      let that = this;
      that.message = null;
      that.editVisible = false;
      that.search();
    },
    //充值
    recharge(row) {
      let that = this;
      that.rechargeInfo = {
        id: row.id,
        account: row.account
      };
      that.rechargeVisible = true;
    },
    //充值确定
    rechargeSure() {
      let that = this;
      if (!that.rechargeInfo.rechargeNum) {
        that.showMsg("请输入充值条数", "error");
        return;
      } else {
        if (!/^[0-9]+$/.test(that.rechargeInfo.rechargeNum)) {
          that.showMsg("请输入数字", "error");
          return;
        }
      }
      that.ajaxJson({
        url: "/customerManage/recharge",
        data: that.rechargeInfo,
        success: function(res) {
          if (res.code == "0") {
            that.showMsg("充值成功", "success");
          } else {
            that.showMsg(res.message, "error");
          }
          that.rechargeCancle();
          that.search();
        }
      });
    },
    //充值取消
    rechargeCancle() {
      let that = this;
      that.rechargeInfo = {
        id: "",
        rechargeNum: ""
      };
      that.rechargeVisible = false;
    },
    //重置密码
    modifyPassword(row) {
      let that = this;
      that.modifyInfo = {
        id: row.id,
        account: row.account
      };
      that.modifyVisible = true;
    },
    //重置密码确定
    modifySure() {
      let that = this;
      if (!that.modifyInfo.password) {
        that.showMsg("请输入密码", "error");
        return;
      } else {
        if (!/^[0-9A-Za-z]{6,20}$/.test(that.modifyInfo.password)) {
          that.showMsg("密码需为6-20位数字或字母", "error");
          return;
        }
      }
      that.ajaxJson({
        url: "/customerManage/resetPassword",
        data: {
          id: that.modifyInfo.id,
          password: md5(that.modifyInfo.password)
        },
        success: function(res) {
          if (res.code == "0") {
            that.showMsg("重置密码成功", "success");
          }
          that.modifyCancle();
        }
      });
    },
    //充值密码取消
    modifyCancle() {
      let that = this;
      that.modifyInfo = {
        id: "",
        password: ""
      };
      that.modifyVisible = false;
    }
  },
  created() {
    let that = this;
    that.search();
  }
};
</script>
<style lang="less">
.customer-list-page {
  .add {
    float: left;
  }
  .inputWidth {
    width: 120px;
  }
  li {
    display: flex;
    line-height: 40px;
    margin-bottom: 10px;
    .span1 {
      width: 120px;
      flex: none;
      color: #999;
      text-align: right;
    }
    .span2 {
      flex: 1;
      margin-left: 20px;
      .el-input {
        width: 60% !important;
      }
      .inputWidth {
        width: 120px;
      }
      .el-select {
        .el-input {
          width: 100% !important;
        }
      }
      .el-input__inner {
        width: 100%;
        height: 36px;
        padding: 0 5px;
      }
      .el-checkbox__inner {
      }
    }
  }
}
</style>
